<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../js/jquery-1.8.0.min.js"></script>
<style>
div {
	margin: 3px;
	width: 50px;
	position: absolute;
	height: 50px;
	left: 10px;
	top: 30px;
	background-color: yellow;
}

div.red {
	background-color: red;
}
</style>


</head>

<body>

	<button>开始</button>
	<div></div>
	<script>
		$("button").click(function() {
			//left属性做+200操作,持续2秒 ;
			$("div").animate({
				left : '+=200px'
			}, 2000);
			//用0.6s的时间使top属性变为0;
			$("div").animate({
				top : '0px'
			}, 600);
			//增加一个队列;
			$("div").queue(function() {
				$(this).toggleClass("red");
				//终止队列,相当于break;不终止会阻塞 
				$(this).dequeue();
			});
			//使用0.7s时间是left变为10top为30
			$("div").animate({
				left : '10px',
				top : '30px'
			}, 700);
		});
	</script>
</html>